<template>
  <div class="valid-part">
    <label v-show="display">
      <div class="valid-item">
        参会名称:
        <input ref="username" placeholder="请输入参会名称" maxlength="64" v-model="username" />
      </div>
      <div class="valid-item">
        直播密码:
        <input ref="password" type="password" placeholder="请输入直播密码" maxlength="32" v-model="password"/>
      </div>
      <div class="valid-item">
        <button @click="inputModelValue"> 进入直播 </button>
      </div>
    </label>
  </div>
</template>

<script>
import { Request } from "../../commons/Request";
import * as StrUtil from "../../commons/StrUtil";
import * as ResUtil from "../../commons/ResUtil";
import { random4Digits } from "../../commons/NumUtil"
import StoreUtils from '../../commons/StoreUtils';
import { filterSpeChar } from '../../commons/StrUtil'
import * as Const from '../../commons/Const'

import "../../assets/css/valid.css";

export default {
  name: "valid",
  data() {
    return {
      sn: "",
      username: "游客" + random4Digits(),
      password: "",
      display: false
    };
  },

  // 页面初始化
  created() {
    // 获取直播会议信息
    this.sn = StrUtil.urlParam(window.location.href, Const.SN);
    if (this.sn === undefined || this.sn.length === 0) {
      this.$Message.error('请输入正确的链接地址');
      return;
    }

    Request({
      url: Const.API_CONF_INFO,
      method: "post",
      data: { billingCode: this.sn }
    }).then(res => {
      if (ResUtil.isSuccess(res)) {
        // 是否允许直播
        if (res.value.live) {
          this.display = true;

          // 存储会议Id, 会议名称用于websocket连接
          StoreUtils.setValue(Const.CONF_ID, res.value.confId)
          StoreUtils.setValue(Const.CONF_NAME, res.value.confName)
        }
      } else {
        this.$Message.error({
          content: ResUtil.errMessage(res),
          duration: 10,
          closable: true
        });
      }
    });
  },

  methods: {
    inputModelValue() {
      // 校验输入是否合法
      if (this.username === undefined || filterSpeChar(this.username).length < 1) {
        this.$Message.error('请输入参会名称');
        this.$refs.username.focus();
        return;
      }
      if (this.password === undefined || filterSpeChar(this.password).length < 6) {
        this.$Message.error('请输入正确的直播密码');
        this.$refs.password.focus();
        return;
      }

      // 校验密码是否正确
      Request({
        url: Const.API_LIVE_URL,
        method: "post",
        data: { sn: this.sn, name: filterSpeChar(this.username), password: this.password }
      }).then(res => {
        if (ResUtil.isSuccess(res)) {
          // 赋值直播变量
          StoreUtils.setValue(Const.SN, this.sn)
          StoreUtils.setValue(Const.USERNAME, filterSpeChar(this.username))
          StoreUtils.setValue(Const.PASSWORD, this.password)

          // 正在直播, 设置直播地址
          if (res.value.living) {
            this.$store.commit('setLiving', res.value.living)
            StoreUtils.setValue(Const.LIVE_URL, res.value.liveUrl)
          }

          // 转到直播页面
          this.$router.push("/show/" + this.sn);

        } else { // 入会密码错误
          this.$Message.error(ResUtil.errMessage(res));
        }
      });
    }
  }
};
</script>

<style scoped>
</style>
